<template>
  <div class="com-container">
    <!-- :style="popheight+'px'" :style="RiskWidth" -->
    <div class="com-chart com-charts" ref="echarts" style="z-index:555;position: relative;"></div>
  </div>
</template>

<script>
export default {
  props: ["commonData","commonText"],
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
    };
  },
  watch: {
    commonData: function (a, b) {
      this.getData();
    },
    commonText: function (a, b) {
      this.getData();
    },
  },

  mounted() {
    setTimeout(() => {
      this.initChart();
      // this.getData();
      window.addEventListener("resize", this.screenAdapter);
      // 在页面加载完成的时候, 主动进行屏幕的适配
      this.screenAdapter();
    }, 20);
  },

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);

      var m = 6;
      let colorList = ["#13E2A2", "#F1B144", "transparent"];
      //
      var getname = ["已办", "待办"];
      var getvalue = [50, 50];
      var data = [];
      for (var i = 0; i < getname.length; i++) {
        data.push({ name: getname[i], value: getvalue[i] });
      }

      // var colorList = ['#4885FF', '#FEC67C']
      var a = 0;
      for (var i = 0; i < data.length; i++) {
        a += data[i].value;
      }

      data.push({
        value: a,
        name: "__other",
        itemStyle: { normal: { color: "rgba(0,0,0,0)" } },
      });
      var textContent = 20;
      const initOption = {
        // backgroundColor:"#0E1345",
        grid: {
          containLabel: true,
          left: 20,
          right: 20,
          bottom: 0,
          top: 45,
        },
        title: [
          {
            x: "0%",
            y: "10%",
          },
          {
            x: "78%",
            y: "10%",
          },
          {
            x: "center",
            bottom: "10",
          },
        ],

        legend: {
          show: false,
        },
        color: colorList,
        series: [
          {
            name: "",
            type: "pie",
            hoverAnimation: false,
            startAngle: -180,
            radius: ["105%", "130%"],
            center: ["50%", "84%"],
            label: {
              show: false,
            },
          },
          // transparent
          {
            name: "男女教师比例",
            type: "pie",
            hoverAnimation: false,
            startAngle: -180,
            radius: ["90%", "105%"],
            center: ["50%", "84%"],
            data: data,
            itemStyle: {
              emphasis: {
                show: false,
              },
              normal: {
                color: function (params) {
                  var colorList = [
                    {
                      c1: "#010148", //管理
                      c2: "#010148",
                    },
                    {
                      c1: "#010148", //实践
                      c2: "#010148",
                    },
                    {
                      c1: "#010148", //操作
                      c2: "#010148",
                    },
                  ];
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                      offset: 0,
                      color: colorList[params.dataIndex].c1,
                    },
                    {
                      offset: 1,
                      color: colorList[params.dataIndex].c2,
                    },
                  ]);
                  /*  return colorList[params.dataIndex]*/
                },
              },
            },
            label: {
              show: false,
            },
          },
          {
            name: "男女教师比例",
            type: "pie",
            startAngle: 180,
            radius: ["130%", "148%"],
            center: ["50%", "84%"],
            data: data,
            hoverAnimation: false,
            itemStyle: {
              emphasis: {
                show: false,
                // shadowBlur: 10,
                // shadowOffsetX: 0,
                // shadowColor: "rgba(224,235,255, 0.5)",
              },
              normal: {
                color: function (params) {
                  var colorList = [
                    {
                      c1: "#010148", //管理
                      c2: "#010148",
                    },
                    {
                      c1: "#010148", //实践
                      c2: "#010148",
                    },
                    {
                      c1: "#010148", //操作
                      c2: "#010148",
                    },
                  ];
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                      offset: 0,
                      color: colorList[params.dataIndex].c1,
                    },
                    {
                      offset: 1,
                      color: colorList[params.dataIndex].c2,
                    },
                  ]);
                },
              },
            },
            label: {
              show: false,
            },
          },
          {
            name: "",
            type: "gauge",
            center: ["50%", "84%"],
            radius: "150%",

            min: 0, //最小刻度
            max: 100, //最大刻度
            startAngle: 180,
            endAngle: 0,

            // axisLine: {
            //   lineStyle: {
            //     //
            //     color: [
            //       [0.3, "rgba(0,204,158,0.4)"],
            //       [0.7, "transparent"],
            //       [1, "rgba(215,157,77,0.4)"],
            //     ],
            //     width: 1,
            //   },
            // },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              length: 50,
              lineStyle: {
                width: 10,
                color: "#2C3638",
              },
            },
            splitNumber: 5,
            detail: {
              show: false,
            },
            animationDuration: 4000,
          },
        ],
      };
      //   图表大小自适应
      //   this.$echartsResize(myChart);
      this.chartInstance.setOption(initOption);
      //   tools.loopShowTooltip(this.chartInstance, initOption, {
      //     loopSeries: true,
      //   });
    },
    getData() {
      // console.log(this.commonData);
      // this.reportData = {
      //   PassNum: 20,
      //   NotPassNum: 40,
      //   AllNum: 60
      // }
      this.allData = this.commonData;


      var that = this

      setTimeout(() => {
        that.updateChart(this.allData,this.commonText);
      }, 200)
    },
    updateChart(data,text) {
      // console.log(data);

      // var data=this.allData
      // let list = [
      //   {
      //     name: "劳务人员",
      //     value: data.presencePerson,
      //   },
      //   {
      //     name: "技术人员",
      //     value: data.technicianPerson,
      //   },
      //   {
      //     name: "__other",
      //     value: "0",
      //   },
      // ];
      let list = [
        {
          name: "劳务人员",
          value: data.BhzDischargPass,
        },
        {
          name: "技术人员",
          value: data.BhzDisEcceed,
        },
        {
          name: "__other",
          value: "0",
        },
      ];
      if (data.BhzDischargeSum == 0) {
        list[list.length - 1].value = 1;
      } else {
        list[list.length - 1].value = data.BhzDischargeSum;
      }
      var textContent = 20;
      // var a = (data.PassNum / data.AllNum) * 100;
      // var b = (data.NotPassNum / data.AllNum) * 100;
      // console.log(list);
      // console.log(data.technicianPerson);
      var a1="出料合格"+text+"数"
      var a2="出料超标"+text+"数"
      var a3="出料总"+text+"数"

      var dataOption = {
        title: [
          {
            text:
              "{a|" +a1 +"}{c|\n}{a|  }{c|" +
              data.BhzDischargPass +
              "}{c|\n}{a|  合格数占比}{c|\n}{a|  }{c|" +
              Number(data.BhzDischargRate) +
              "%" +

              "}",
          },
          //
          {
            text:
              "{a|" +a2 +"}{c|\n}{a|  }{c|" +
              data.BhzDisEcceed +
              "}{c|\n}{a|  超标数占比}{c|\n}{a|  }{c|" +
              Number(data.BhzDisgEcceedRate) +
              "%" +

              "}",
          },
          {
            text: "{c|" + data.BhzDischargeSum + "}{c|\n}{a|"+ a3+"}",
          },
        ],
        series: [
          {
            type: "pie",
            data: list,
          },
          // {},
        ],
        //
      };

      this.chartInstance.setOption(dataOption);
    },
    // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
    screenAdapter() {
      const titleFontSize = (this.$refs.echarts.offsetWidth / 100) * 3.6;
      // console.log(titleFontSize);

      //   和分辨率大小相关的配置项
      const adapterOption = {
        title: [
          {
            // text:
            //   "{a|  出料合格数(盘)}{c|\n}{a|  }{c|" +
            //   textContent +
            //   "}{c|\n}{a|  合格数占比}{c|\n}{a|  }{c|" +
            //   textContent +
            //   "%" +
            //   "}",
            // x: "0%",
            // y: "10%",
            textStyle: {
              rich: {
                a: {
                  fontSize: titleFontSize / 1.31,
                  color: "#13E2A2",
                  lineHeight: titleFontSize * 1.25,
                  //                   borderColor:"red",

                  // borderWidth: 5,
                  // borderType:"solid"
                },

                c: {
                  fontSize: titleFontSize * 1.01,
                  fontWeight: "bold",
                  color: "#13E2A2",
                },
              },
            },
          },
          {
            // text:
            //   "{a|  出料超标数(盘)}{c|\n}{a|  }{c|" +
            //   textContent +
            //   "}{c|\n}{a|  超标数占比}{c|\n}{a|  }{c|" +
            //   textContent +
            //   "%" +
            //   "}",
            // x: "74%",
            // y: "10%",
            textStyle: {
              rich: {
                a: {
                  fontSize: titleFontSize / 1.31,
                  color: "#F1B144",
                  lineHeight: titleFontSize * 1.25,
                  align: "right",
                },

                c: {
                  fontSize: titleFontSize * 1.01,
                  fontWeight: "bold",
                  color: "#F1B144",

                  align: "right",
                },
              },
            },
          },
          {
            textStyle: {
              rich: {
                a: {
                  fontSize: titleFontSize / 1.4,
                  color: "#c9c9c9",
                  lineHeight: titleFontSize * 1.36,
                },

                c: {
                  fontSize: titleFontSize * 1.1,
                  fontWeight: "bold",
                  color: "#fff",
                },
              },
            },
          },
        ],

        series: [
          {},
          {},
          {},
          {
            axisLine: {
              lineStyle: {
                //
                color: [
                  [0.5, "rgba(0,204,158,0.4)"],
                  // [0.62, "transparent"],
                  [1, "rgba(215,157,77,0.4)"],
                ],
                width: 1,
              },
            },
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scope>
.com-chart::after {
  //     display: block;
  //     content: "123";
  //     position: absolute;
  //     left: 0;
  //     top: 0;
  //   width: 50px;
  //   height: 40px;
  //   border: 1px solid red;
  //   z-index: 9999;
}

.com-charts ::after {
  //   display: block;
  //   content: "123";
  //   position: absolute;
  //   transform: translate(-50%,-50%);
  //   left: 50%;
  //   top: 60%;
  // width: 47%;
  // height: 90%;

  // z-index: 9999;
}
</style>
